<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
    body{
        margin: 0;
    }
    header{
        height: 700px;
        background-image: url(bg.jpg);
        background-size:cover;
        display: flex;
        align-items: center;
        justify-content:center;
    }
    button{
        position:relative;
         top: 200px;
         width: 200px;
         height: 100px;
         background-color: red;
         color: pink;
        font-size: 40px;
        border: 1px solid #fff;
        outline: none;
        border-radius:20px;
        cursor: pointer;
}
        button: hover{
        background-color:blue;
        color:yellow;

}
div{
        height: 300px;
        display: flex;
        align-items: center;
        justify-content:center;
}
span{
    font-size: 50px;
    color:red;
}
article{
    height:580px;
    background-image: url(2.jpg);
    background-attachment:fixed;
    background-size: cover;
}

main{
    height: 580px;
    position:relative;
}
main>img{
    position:absolute;
    bottom:0;
    left: 200px;
}
main>aside{
width:500px;
position:absolute;
top: 100px;
right:200px;
}
aside>h1{
    font-size: 50;
color:orange;
}
aside>p{
    font-size: 20;
    color:purple;
}

</style>
</head>
<body>
<header>
<button>点击下载</button>
</header>
<div>
    <span>乐·在·沟·通</span>
</div>
<article></article>
<main> <img src="pic1.png" alt="">
<aside>
<h1>沟通，是跨越千山万水的亲切声音</h1>
<p>无论何时何地，你都能享受QQ在各类终端上带来的高清通话，与好友一起想聊多久聊多久</p>
<p><a href="http://im.qq.com//">了解更多></a>
</p>
</aside>
</main>
</body>
</html>